<template>
  <div class="layerTree">
    <div style="margin-bottom:15px;">
      <el-input clearable placeholder="输入图层名称过滤" v-model="filterText" ref="layer_filter_input"></el-input>
    </div>
    <!--图层树-->
    <el-tree
      class="filter-tree"
      show-checkbox
      render-after-expand
      highlight-current
      node-key="_id"
      :data="layerTree"
      :props="defaultProps"
      :default-expanded-keys="[1]"
      :filter-node-method="filterNode"
      ref="tree2"
      @check="nodeCheck"
    >
      <span slot-scope="{node,data}">
        <i v-if="data.layers" class="treeGroupIcon kfb-icon-leimu"></i>
        <i v-if="!data.layers" class="treeItemIcon kfb-icon-kehuxinxiliebiao"></i>
        <span v-if="data.layers" class="treeGroup">{{node.label}}</span>
        <span v-if="!data.layers" class="treeItem" :disabled="!data.isVisible" @click="layerLocateTo($event,data)">{{node.label}}</span>
        <div style="float:right;margin-top:4px;margin-right:3px;">
          <el-button v-if="false" :disabled="data.attribute===''" type="success" icon="el-icon-message" circle
                     @click="attributesQuery($event,data)"></el-button>
        </div>
        <el-slider v-if="!data.layers && data.isVisible" v-model="data.alpha" @change="change($event,data)"></el-slider>
      </span>
    </el-tree>

  </div>
</template>
<script>
  import {mapState} from 'vuex';

  export default {
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },
    methods: {
      /**
       * 图层过滤
       * @param value
       * @param data
       * @returns {boolean}
       */
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      /**
       * 控制图层开闭
       * @param data
       * @param Node
       */
      async nodeCheck(data, Node) {
        if (data.layers) {
          for (let i = 0; i < data.layers.length; i++) {
            const layer = data.layers[i];
            const isVisible = Node.checkedKeys.indexOf(layer._id) > 0;
            layer.isVisible = isVisible;
            const bid = this.findNearVisibleLayerId(layer);
            await  this.mapService.setLayerVisible(isVisible, layer, bid ? bid.id : undefined);
            layer.alpha = 0;
          }
        } else {
          const isVisible = Node.checkedKeys.indexOf(data._id) >= 0;
          data.isVisible = isVisible;
          const bid = this.findNearVisibleLayerId(data);
          await this.mapService.setLayerVisible(isVisible, data,bid ? bid.id : undefined);
          data.alpha = 0;
        }
      },
      /**
       * 设置透明度
       * @param $event
       * @param data
       */
      change($event, data) {
        data.alpha = $event;
        this.mapService.setOpacityValue(1 - $event / 100, data); //
      },
      /**
       * 属性查询
       */
      attributesQuery($event, layer) {
        
      },
      /**
       *
       * 图层定位
       * @param $event
       * @param data
       */
      layerLocateTo($event, data) {
        this.mapService.setMapBoundsByLayerBounds(data); //高亮
      },
      /**
       * 查找最近打开图层
       */
      findNearVisibleLayerId(layer) {
        let index = 0;
        for (let i = this.allLayers.length - 1; i >= 0; i--) {
          if (layer._id === this.allLayers[i]._id) {
            index = i;
            continue;
          }
          if (index > i && this.allLayers[i].param && this.allLayers[i].param.isAdd) {
            //console.log(layer.name + ">>前一个打开图层 >>",this.allLayers[i].name + "参数:",this.allLayers[i].param);
            return this.allLayers[i].param;
          }
        }
        return undefined;
      }
    },
    data() {
      return {
        filterText: "",                 //过滤
        defaultProps: {
          children: "layers",
          label: "name"
        },
        allLayers:[]
      };
    },
    computed: {
      ...mapState({
        /**
         * 图层数据结构
         * @param state
         * @returns {any[]}
         */
        layerTree(state) {
          let layers = [];
          state.user.subjectData.forEach(dist => {
              dist.groups.forEach(group => {
                  if(group.layers.length>0){
                      layers.push(group);
                  }
              })
          });
          this.allLayers = [];
          return layers.map((o, i, a) => {     //TODO 合并行政区下的数据组
            o.layers.forEach(l => {
              this.$set(l, 'alpha', 0);
              this.$set(l, 'isVisible', false)
            })
            this.allLayers = this.allLayers.concat(o.layers);
            return o;
          });
        },
        /**
         *
         * @param state
         * @returns {mapService|(function(*))|*}
         */
        mapService(state) {
          return state.xcgl.mapService;
        }
      })
    },
    mounted(){
      this.$nextTick(()=>{
        this.$refs['layer_filter_input'].focus();
      })
    }
  };
</script>

<style>
  .layerTree .el-checkbox__inner {
    border-color: #409eff;
  }

  .layerTree .el-tree-node__children .el-tree-node__content {
    height: auto;
    padding: 4px;
  }

  .layerTree .el-main {
    padding: 0px;
  }

  .el-input__inner {
    border-radius: 0px;
  }

  .layerTree .el-tree-node__content {
    display: block;
  }

  .layerTree .el-slider__runway {
    width: 80%;
    margin: 5px 20px;
    margin-left: 52px;
    height: 3px;
  }

  .layerTree .el-button.is-circle {
    padding: 2px;
  }

  .layerTree .el-slider__bar {
    height: 3px;
  }

  .layerTree .el-slider__button {
    width: 10px;
    height: 10px;
  }

  .layerTree .el-slider__button-wrapper {
    top: -13px;
    height: 30px;
    width: 30px;
  }

  .layerTree .el-button {
    font-size: 5px;
  }

  .treeGroupIcon {
    font-size: 16px;
    color: #409eff;
  }

  .treeItemIcon {
    font-size: 13px;
    color: #409eff;
  }

  .treeGroup {
    font-size: 14px;
    color: #333;
    /* font-weight: bold; */
    font-family: "Microsoft YaHei"
    /* color: #409eff */
  }

  .treeItem {
    font-size: 13px;
    color: #919192;
    font-family: "Microsoft YaHei"

    /* color:#d9e9ff; */
  }
</style>


